<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./layui/css/layui.css">
<style type="text/css">
body{padding:10px;}
</style>
</head>
<body>



<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>

<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="switchTpl">
  <!-- 这里的 checked 的状态只是演示 -->
  <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="女|男" lay-filter="sexDemo" {{ d.id == 1003 ? 'checked' : '' }}>
</script>
 
<script type="text/html" id="checkboxTpl">
  <!-- 这里的 checked 的状态只是演示 -->
  <input type="checkbox" name="lock" value="{{d.id}}" title="锁定" lay-filter="lockDemo" {{ d.id == 1007 ? 'checked' : '' }}>
</script>

<script type="text/javascript" src="./layui/layui.js"></script>
<script type="text/javascript">
var url = "./json/user.json?v=2";
url = "./php/user.php";
layui.use('table',function(){
    var table = layui.table;
    var form = layui.form;
    table.render({
        elem:'#test',
        url:url,
        cellMinWidth:80,
        toolbar: '#toolbarDemo',
        cols:[[
            {type: 'checkbox', fixed: 'left'},
            {field:'id',width:80,title:'ID',sort:true},
            {field:'username',width:100,title:'用户名'},
            {field:'sex', title:'性别', width:85, templet: '#switchTpl', unresize: true},
            {field:'sign',width:'30%',minWidth:100,title:'签名',edit:'text',},
            {field:'experience',title:'积分',sort: true},
            {field:'lock', title:'是否锁定', width:110, templet: '#checkboxTpl', unresize: true},
            {field:'classify',title:'职业'},
            {field:'wealth',title:'财富',sort: true},
            {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
        ]],
        page:true, // 开始分页
    });
    // 头部工具栏
    table.on('toolbar(test)', function(obj){
        var checkStatus = table.checkStatus(obj.config.id);
        switch(obj.event){
            case 'getCheckData':
            var data = checkStatus.data;
            layer.alert(JSON.stringify(data));
            break;
            case 'getCheckLength':
            var data = checkStatus.data;
            layer.msg('选中了：'+ data.length + ' 个');
            break;
            case 'isAll':
            layer.msg(checkStatus.isAll ? '全选': '未全选');
            break;
        };
    });
    //监听行工具事件
    table.on('tool(test)',function(obj){
        var data = obj.data;
        console.log(obj);
        if(obj.event === 'edit'){
            layer.msg('你点击了要修改'+obj.data.id+'这条数据');
        };
        if(obj.event === 'del'){
            layer.confirm("确定要删除"+obj.data.id+'吗?',function(index){
                obj.del();
                layer.close(index);
            });
        };
    });
    // 监听单元格编辑
    table.on('edit(test)',function(obj){
        var value = obj.value; // 获取修改后的值
        var data = obj.data;// 获取所在行的键值
        var field = obj.field;// 得到修改的字段
        layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
    });
    //监听性别操作
    form.on('switch(sexDemo)', function(obj){
        layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
    });
    //监听锁定操作
    form.on('checkbox(lockDemo)', function(obj){
        layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
    });
});
</script>
</body>
</html>